<template>
  <v-md-preview :text="markdown"></v-md-preview>
  <div class="input-group-append">
    <span class="input-group-text border-0">
      <input type="file" accept="application/pdf, .md" id="fileInput" ref="file" @change="handleUpload"
             style="display:none">
      <button class="btn btn-sm btn-link text-muted" data-toggle="tooltip"
              @click="($refs.file as HTMLInputElement).click()" title="" type="button"
              data-original-title="Attachment">
        <i class="zmdi zmdi-attachment font-22"></i>
      </button>
    </span>
  </div>
</template>

<script setup lang="ts">
import {createApp, ref} from 'vue';
import VMdPreview from '@kangc/v-md-editor/lib/preview';
import '@kangc/v-md-editor/lib/style/preview.css';
import githubTheme from '@kangc/v-md-editor/lib/theme/github.js';
import '@kangc/v-md-editor/lib/theme/style/github.css';

// highlightjs
import hljs from 'highlight.js';
import {encode} from "gpt-tokenizer";

VMdPreview.use(githubTheme, {
  Hljs: hljs,
});

const app = createApp(/*...*/);

app.use(VMdPreview);

let markdown = ref<string>("# 你好")
// File upload related
var fileName = ref()
var fileSize = ref<number>(0)
var formattedFileSize = ref<string>('0B')
var fileUploadCard = ref<boolean>(false)

var fileContent = ref()
// vue3-pdf-app UI configuration
let pdfFile = ref<string>("")

function handleUpload(e: Event) {
  const target = e.target as HTMLInputElement;
  if (target.files && target.files[0].size >= 5 * 1024 * 1024) {
    alert('Maximum file size limit is 5MB')
    return
  } else if (!target.files || target.files.length === 0) {
    alert('Please select a file')
    return
  }

  // Set file upload style
  fileName.value = target.files[0].name
  fileSize.value = target.files[0].size

  const fileReader = new FileReader();
  fileReader.onload = (e: any) => {
    markdown.value=e.target.result
    console.log(e.target.result) // 文件文本字符串
  }
  fileReader.readAsText(target.files[0]);

}

</script>
